1. Problem
Your application
starts connecting to a web page, and you need to show a splash screen
with an animated progress bar in order to inform users that they need to
wait a few seconds before using the application.
2. Solution
You can create a user control and use it with the Child property provided by the Popup class. The ProgressBar control has the IsIndeterminate property set to true.
3. How It Works
The splash screen provided by
the Visual Studio 2010 Windows Phone 7 Silverlight Application project
template is static, a simple PNG image shown during the application
launch. To create an animated splash screen, you need to remove the SplashScreen.png file from the project and use a trick: the Popup class.
Usually, the Popup
class is used to show tooltips during mouse activities in desktop
applications. However, with a Windows Phone 7 application, you can use
it to show a generic UIElement object,
perhaps either a common control or a user control. User controls are
often used when you need to compose more than one common control within a
unique control having its own logic. Instead of using dozens of
controls to create a complex user interface, you can separate
functionality into user controls and thereby achieve code reusability
too.
In this case, you are going
to create a user control composed of a full-screen image—480×800
pixels—some text, and a progress bar. The Popup class provides the Child property used to specify the UIElement that has to be shown. In this case, the Child property will be set to the MySplashScreen object defined by the user control.
The ProgressBar control within the user control has the IsIndeterminate property set to true
because the loading time of the web page cannot be estimated. Indeed,
when your application starts, you make a call to a web page, and because
you don't know whether the phone is connected to Wi-Fi or to General
Packet Radio Service (GPRS), or whether some network traffic delays
might occur, you cannot estimate the loading time.
When the application is
launched, the pop-up will fill the entire screen surface, and the
progress bar will display across the screen. Behind the scenes, the WebBrowser control will load the page and then raise the Navigated event. Trapping the Navigated event will allow you to hide the pop-up and show the user interface that is underneath.
4. The Code
To demonstrate the animated splash screen example, you are going to create a FlickrPhotoAlbum application. This application uses the Flickr.NET library (see http://flickrnet.codeplex.com) and the phone camera to take a picture and upload it to a Flickr gallery.
Before uploading Flickr.NET
API calls to the destination, users have to be authenticated to Flickr
and have to accept that your application will use their resources.
Our application accomplishes these steps by redirecting the WebControl content to an URL page returned by the AuthCalcUrl
method call. In this case, the animated splash screen is really useful
in enabling you to avoid having the user interface show blank WebControl content until the page is loaded. Indeed, by using the Navigated
event handler, you know exactly when the page has finished loading and
can hide the splash screen. Let's examine the code from the FlickrPhotoAlbum application.
In the MySplashScreen.xaml file, you defined the user control's user interface. It is composed of a full-screen image, a TextBlock control showing the Loading text, and a ProgressBar:
<UserControl x:Class="FlickrPhotoAlbum.MySplashScreen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="800" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="White" Width="480" Height="800">
<ProgressBar HorizontalAlignment="Left" Margin="47,692,0,89" Name="pbProgress"
Width="383" />
<Image Height="512" HorizontalAlignment="Left" Margin="114,75,0,0" Name="imgScreen"
Stretch="Fill" VerticalAlignment="Top" Width="272" Source="images/screen.jpg" />
<TextBlock HorizontalAlignment="Left" Margin="185,656,0,114" Text="Loading..."
Width="111" Foreground="Black" FontSize="22" />
</Grid>
</UserControl>
NOTE
The screen.png image is included in the project inside the images folder and has the Build Action property set to Content. In this way, you can use the relative path in the Source attribute of the Image tag.
The IsIndeterminate property value is set to true in the MySplashScreen constructor:
namespace FlickrPhotoAlbum
{
public partial class MySplashScreen : UserControl
{
public MySplashScreen()
{
InitializeComponent();
this.pbProgress.IsIndeterminate = true;
}
}
}
In the MainPage.xaml.cs file, you define the MainPage class constructor in which the Popup object is created, its Child property is set to an object of the MySplashScreen class, and the IsOpen property is set to true, causing the splash screen to be shown:
public partial class MainPage : PhoneApplicationPage
{
Popup popup = null;
// Constructor
public MainPage()
{
InitializeComponent();
. . .
popup = new Popup();
popup.Child = new MySplashScreen();
popup.IsOpen = true;
}
The IsOpen property is set to false in the Navigated event handler that is raised by the WebBrowser control after having completely loaded the web page:
private void wbBrowser_Navigated(object sender,
System.Windows.Navigation.NavigationEventArgs e)
{
this.popup.IsOpen = false;
}
The instruction to trap the Navigated event is declared in the phone:WebBrowser XAML tag by using the Navigated attribute:
<phone:WebBrowser x:Name="wbBrowser" Grid.Row="0" Navigated="wbBrowser_Navigated"/>
5. Usage
In Visual Studio 2010, select
Windows Phone 7 Emulator as the target output and press Ctrl+F5. The
emulator displays the animated splash screen, as shown in Figure 1.
The splash screen automatically disappears when the web page is loaded, showing the user interface beneath (see Figure 2).